<template>
	<view class="chat_main">
		<view class="top_notice_online_customer_service">
			<view class="notice_view" @click="clickNotice">
				<view class="notice_image_view">
					<uni-icons type="notification" color="#14aa09" size="26"></uni-icons>
					<!-- <uni-icons type="notification" color="#14aa09" size="26"></uni-icons> -->
				</view>
				<view class="title_time_content_view">
					<view class="title_text_time">
						<view class="title_text">
							通知
						</view>
						<view class="time_view">
							{{systemNoticeTime}}
						</view>
					</view>
					<view class="content_view_redDot">
						<view class="content_view">
							{{ststemNoticeContent}}
						</view>
						<view class="dot_view" v-show="!isReadSyetemNotice">
							<uni-icons type="smallcircle-filled" color="#ea493d" size="12"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="online_customer_service_view notice_view" @click="gotoChatRoom({userAid: 0})">
				<view class="customer_service_avatar_view notice_image_view">
					<image :src="customerServiceAvatarUrl" mode="aspectFill" class="customer_service_avatar_image">
					</image>
				</view>
				<view class="online_title_time_content title_time_content_view">
					<view class="online_title_time title_text_time">
						<view class="online_title title_text">
							您的专属客服
						</view>
						<view class="time_view">
							{{customerMessageTime}}
						</view>
					</view>
					<view class="content_dot content_view_redDot">
						<view class="online_text content_view">
							{{onlineCustomerMessage}}
						</view>
						<view class="customer_service_notice_dot" v-show="!isReadCustomerMessage">
							{{unReadCustomerMessageNum}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 分割线 -->
		<view class="divider"></view>
		<!-- 消息列表 -->
		<view class="notices_list_view">
			<view class="notice_view notice_list" v-for="(item,index) in newMessageList" :key="index"
				@click="gotoChatRoom(item)">
				<view class="notice_image_view">
					<image :src="item.avatar" mode="aspectFill" class="customer_service_avatar_image">
					</image>
				</view>
				<view class="title_time_content_view">
					<view class="title_text_time">
						<view class="title_text">
							{{item.pName}}
						</view>
						<view class="time_view">
							{{item.messageTime}}
						</view>
					</view>
					<view class="content_view_redDot">
						<view class="content_view">
							{{item.briefMessage}}
						</view>
						<view class="customer_service_notice_dot" v-if="!item.isRead">
							{{item.unReadMessageNum}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import mitter from '@/common/mitt/eventBus.js';
	import { getAllUserMessageList } from '@/request/chat.js';
	export default {
		data() {
			return {
				customerMessageTime: '昨天9:02', // 专属客服发来的最新一条消息的时间
				onlineCustomerMessage: '感谢您支持和关注疆屿APP', // 专属客服发来的最新一条消息
				unReadCustomerMessageNum: 2, // 客服发来的未读消息条数
				isReadCustomerMessage: false, // 是否已读客服消息
				systemNoticeTime: '28分钟前', // 系统消息中最新的一条消息发来的时间
				ststemNoticeContent: '欢迎使用疆屿APP...', // 系统消息中最新的一条消息发来的内容
				isReadSyetemNotice: false, // 是否已读系统消息
				customerServiceAvatarUrl: 'http://t13.baidu.com/it/u=1736317684,2632872284&fm=224&app=112&f=JPEG?w=350&h=350',
				noticeList: [
					// {
					// 	userAid: 1,
					// 	pName: '罗娜alina',
					// 	avatar: 'https://img2.baidu.com/it/u=1785688133,604980755&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
					// 	briefMessage: '我们已经是好友了，可以聊天了',
					// 	messageTime: '10:45',
					// 	isRead: false,
					// 	unReadMessageNum: 1,
					// 	isShowRedDot: true,
					// },
					// {
					// 	userAid: 2,
					// 	pName: '早起的banana',
					// 	avatar: 'https://img1.baidu.com/it/u=3653118892,4199824862&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
					// 	briefMessage: '我的订单什么时候发货？',
					// 	messageTime: '13:00',
					// 	isRead: true,
					// 	unReadMessageNum: 0,
					// 	isShowRedDot: false,
					// },
					// {
					// 	userAid: 3,
					// 	pName: '28岁带俩娃',
					// 	avatar: 'https://img2.baidu.com/it/u=753554730,338496702&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
					// 	briefMessage: '你可以详细讲讲吗？我也想入手一个这样的帐篷，以后出去野炊也方便了。',
					// 	messageTime: '16:22',
					// 	isRead: false,
					// 	unReadMessageNum: 5,
					// 	isShowRedDot: true,
					// },
				],
				newMessageList: [],
			}
		},
		created() {
			// 获取消息列表
			this.getAllUserMessageListFunc();
			
		},
		mounted() {
			// 添加searchChatOrCommunitiesValue事件监听，只在这里添加一次，避免重复添加
			mitter.on('searchChatOrCommunitiesValue', (data) => {
				// 根据data的值搜索会话列表
				this.searchFunc(data.trim());
			})
		},
		beforeDestroy() {
			mitter.off('searchChatOrCommunitiesValue');
		},
		onHide() {
			mitter.off('searchChatOrCommunitiesValue');
		},
		methods: {
			
			// 获取消息列表
			getAllUserMessageListFunc(){
				
				getAllUserMessageList().then(res=>{
					// console.log(res);
					if(res.data.code === 10000){
						this.noticeList = res.data.data
						// 如果消息列表中的内容太长就加上省略号
						this.editNoticeList();
					}
				}).catch(err=>{
					console.error("获取聊天列表失败", err);
				})
			},

			// 根据data的值搜索会话列表
			searchFunc(data) {
				this.newMessageList = []
				this.noticeList.forEach(item => {
					if (item.pName.includes(data)) {
						this.newMessageList.push(item)
					}
				})
			},

			// 如果消息列表中的内容太长就加上省略号
			editNoticeList() {
				this.newMessageList = this.noticeList.map((item) => {
					var newBreifMessage = item.briefMessage;
					if (item.briefMessage.length > 8) {
						newBreifMessage = item.briefMessage.substring(0, 9).toString() + '...';
					}
					return {
						...item,
						briefMessage: newBreifMessage
					};
				});
			},
			gotoChatRoom(item) {
				// console.log(item);
				if (item.userAid === 0) {
					uni.showToast({
						title: '敬请期待',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: `/pages/friendsChat/chatPage/chatRoomPage?userAid=${item.userAid}`
					})
				}
			},
			clickNotice() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
			}
		}
	}
</script>

<style scoped>
	.chat_main {
		padding: 50rpx;
		padding-top: 180rpx;
		background-color: #fff;
		min-height: calc(100vh - 230rpx);
	}

	.notice_view {
		display: flex;
		flex-direction: row;
	}

	.notice_image_view {
		border: 1px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #afd2d4;
		/* background-color: #66596b; */
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0.8;
	}

	.title_time_content_view {
		width: 85%;
		padding-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.title_text_time {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.content_view_redDot {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.title_text {
		font-size: 18px;
		font-family: hongLeiXingShu;
	}

	.time_view {
		font-size: 14px;
		color: #aaaaaa;
		letter-spacing: 1.5px;
	}

	.content_view {
		font-size: 15px;
		letter-spacing: 1.5px;
		font-family: hongLeiXingShu;
		color: #797979;
		width: 95%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.dot_view {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.customer_service_avatar_image {
		width: 50px;
		height: 50px;
		border-radius: 50%;

	}

	.online_customer_service_view {
		margin-top: 20px;
	}

	.customer_service_notice_dot {
		width: 14px;
		height: 14px;
		background-color: #ea493d;
		border-radius: 50%;
		font-size: 20rpx;
		color: #fff;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.divider {
		margin-top: 20px;
		height: 1px;
		background: linear-gradient(to right, #b56459, #62b1b5);
	}

	.notice_list {
		margin-top: 15px;
	}
</style>